<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">


        <a-link @click="handelDevice(record)" status="warning">
          <template #icon>
            <icon-drag-arrow />
          </template>
          操控
        </a-link>
        <a-link @click="getDeviceWarn(record)" status="danger">
          <template #icon>
            <icon-camera />
          </template>
          绑定设备
        </a-link>
        <a-link @click="handelOrderMoudel(record)" status="warning">
          <template #icon>
            <icon-code-square />
          </template>
          指令模块
        </a-link>
        <!-- <a-button>新增</a-button> -->
      </template>
      <template #device_pic="{ record }">
        <a-link @click="onClick(record)">
          <template #icon>
            <icon-image />
          </template>
          查看图片
        </a-link>
        <div v-if="imageList">

          <a-image-preview-group infinite v-model:visible="visible" :srcList="imageList">
          </a-image-preview-group>
        </div>

      </template>

      <template #now_pic="{ record }">
        <a-link @click="onClick2(record)">
          <template #icon>
            <icon-image />
          </template>
          查看图片
        </a-link>
        <div v-if="imageList">
          <a-image-preview-group infinite v-model:visible="visible" :srcList="imageList">
          </a-image-preview-group>
        </div>
      </template>

      <template #link_status="{ record }">
        <a-tag color="red">
          <template #icon>
            <icon-thunderbolt />
          </template>
          未连接
        </a-tag>
        <a-tag color="green">
          <template #icon>
            <icon-thunderbolt />
          </template>
          未连接
        </a-tag>
      </template>
    </ma-crud>
   
    <device-moudel ref="deviceMoudelRef"  :curDevieInfo="curDevieInfo" />
    <device-warn-home ref="deviceWarnHomeRef"  :curDevieInfo="curDevieInfo" />
    <device-bind-home ref="deviceBindHomeRef"  :curDevieInfo="curDevieInfo" />
    <device-order-home ref="deviceOrderHomeRef"  :curDevieInfo="curDevieInfo" />
    
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import systemDevice from '@/api/system/systemDevice'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import jqr from '@/assets/jiqiren.png'
import circleBox from '@/views/components/ma-circle/index.vue'

import DeviceMoudel from '@/views/system/device/moudel.vue'
import DeviceBindHome from '@/views/system/deviceBind/home.vue'
import DeviceOrderHome from '@/views/system/deviceOrder/home.vue'
// import mqtt from  "mqtt"
import { V3DragZoomContainer } from "v3-drag-zoom";
const crudRef = ref()
const props = defineProps(['pid'])
const visible = ref(false)


const dvisible = ref(false)
const curDevieInfo = ref()
const client = ref();
const topic = ref();

const deviceMoudelRef = ref();
const deviceWarnHomeRef = ref();
const deviceBindHomeRef = ref();
const deviceOrderHomeRef = ref();
const imageList = ref()
console.log(props.pid)
//打开设备地图列表


// onMounted(() => {
//   console.log(crudRef.value.data)
//   const clientId = "emqx_vue3_" + Math.random().toString(16).substring(2, 8);
//   const username = "admin";
//   const password = "bl@2199110";
//   // 建立连接
//   // 注意此出的网址开头要使用ws:而不是tcp:
//   client.value = mqtt.connect("ws://118.190.86.170:8083/mqtt");
//   client.value.on('connect', () => {
//     console.log('连接成功');
//     // Message.success(curDevieInfo.value.device_name+"连接成功");
//   });

//   // 订阅主题
//   client.value.subscribe("PERSONDEVICES/#", (topic) => {
//     console.log(topic);  // 此处打印出订阅的主题名称
//   });



//   // //接受消息
//   client.value.on("message", (topic, data) => {
//     console.log(topic);  // 此处打印出订阅的主题名称
//     // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
//     let machine_host;
//     if (topic) {
//       machine_host = topic.split("/")
//       console.log(machine_host)
//     }
//     let dataArr = JSON.parse(data.toString());

//     if (dataArr.code == 200) {
//       if (dataArr.order == "machine@get@baseinfo") {
//         // Message.success(data.toString());
//         Message.success(`机器人{$machine_host}基础信息获取成功`);
//       } else if (dataArr.order == "machine@get@chargeinfo") {
//         Message.success(data.toString());
//       } else if (dataArr.order == "machine@current@map") {
//         //获取当前地图信息

//         setTimeout(() => {
//           currentMapInfo.width = dataArr.data.width
//           currentMapInfo.height = dataArr.data.height
//           currentMapInfo.image_url = dataArr.data.image_url
//           console.log(currentMapInfo)
//         }, 2000)

//         Message.success("机器人当前地图设置成功");
//       } else if (dataArr.order == "machine@setSpeed") {

//         Message.success("机器人最大速度设置成功");
//       }

//     } else {
//       Message.error(dataArr.message);
//     }
//     // console.log(data.toString());

//   });

//   // //重连
//   client.value.on("reconnect", (error) => {
//     console.log(error)
//     console.log("正在重连:", error);
//     // Message.error(curDevieInfo.value.device_name+"正在重连");
//   });

//   // //错误回调
//   client.value.on("error", (error) => {
//     console.log(error)
//     console.log("MQTT连接已关闭");
//     // Message.error(curDevieInfo.value.device_name+"连接错误");
//   });
// });

//设备操作
const handelDevice = (record) => {
  curDevieInfo.value = record
  deviceMoudelRef.value.open(record)

}
//设备预警管理
const getDeviceWarn = (record) => {
  curDevieInfo.value = record
  deviceBindHomeRef.value.open(record)
}



//指令模块
const handelOrderMoudel = (record) => {
  curDevieInfo.value = record
  deviceOrderHomeRef.value.open(record)
}


const onClick = (record) => {
  imageList.value = [];
  if (record.device_pic) {
    visible.value = true;

    // imageList.value = tool.showFile(item)
    // record.point_image.forEach(function (item) {
    imageList.value.push(tool.showFile(record.device_pic))
    // })
  } else {
    Message.error("暂无图片")
  }
};
const onClick2 = (record) => {
  imageList.value = [];
  if (record.now_pic) {
    visible.value = true;

    // imageList.value = tool.showFile(item)
    // record.point_image.forEach(function (item) {
    imageList.value.push(tool.showFile(record.now_pic))
    // })
  } else {
    Message.error("暂无图片")
  }
};
const numberOperation = (newValue, id, numberName) => {
  systemDevice.numberOperation({ id, numberName, numberValue: newValue }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}

const switchStatus = (statusValue, id, statusName) => {
  systemDevice.changeStatus({ id, statusName, statusValue }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}


const options = reactive({

  beforeRequest: params => {
    // 指定排序字段为浏览量字段
    params.orderBy = 'id'
    // 指定降序排序
    params.orderType = 'desc'

    params.point_id = props.pid
  }
  ,

  id: 'system_device',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: systemDevice.getList,
  recycleApi: systemDevice.getRecycleList,
  add: {
    show: true,
    api: systemDevice.save,
    auth: ['system:device:save']
  },
  edit: {
    show: true,
    api: systemDevice.update,
    auth: ['system:device:update']
  },
  delete: {
    show: true,
    api: systemDevice.deletes,
    auth: ['system:device:delete'],
    realApi: systemDevice.realDeletes,
    realAuth: ['system:device:realDeletes']
  },
  recovery: {
    show: true,
    api: systemDevice.recoverys,
    auth: ['system:device:recovery']
  },
  import: {
    show: true,
    url: 'system/device/import',
    templateUrl: 'system/device/downloadTemplate',
    auth: ['system:device:import']
  },
  export: {
    show: true,
    url: 'system/device/export',
    auth: ['system:device:export']
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "机器名称",
    dataIndex: "device_name",
    formType: "input",
    search: true
  },
  {
    title: "机器host",
    dataIndex: "device_num",
    formType: "input",
    search: true,
    addDisplay: true,
    editDisplay: true

  },
  {
    title: "机器code",
    dataIndex: "device_code",
    formType: "input",
    search: true,
    addDisplay: true,
    editDisplay: true

  },
  {
    title: "连接状态",
    dataIndex: "link_status",
    formType: "input",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "机器类型",
    dataIndex: "device_type",
    formType: "input",
    search: true
  },
  {
    title: "机器型号",
    dataIndex: "device_model",
    formType: "input"
  },
  {
    title: "机器ip",
    dataIndex: "device_ip",
    formType: "input",
    hide: true,
    addDisplay: false,
    editDisplay: false,
  },
  {
    title: "厂家名称",
    dataIndex: "device_factory",
    formType: "input"
  },
  {
    title: "安装地址",
    dataIndex: "device_address",
    formType: "input"
  },
  {
    title: "所属点位",
    dataIndex: "point_id",
    formType: "input",
    search: false,
    addDisplay: false,
    editDisplay: false,
    addDefaultValue: props.pid,
    editDefaultValue: props.pid,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "所属区域",
    dataIndex: "dept_id",
    formType: "input",
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  // {
  //   title: "在线状态",
  //   dataIndex: "status",
  //   formType: "input",
  //   search: true
  // },
  {
    title: "现场照片",
    dataIndex: "now_pic",
    formType: "upload"
  },
  {
    title: "设备照片",
    dataIndex: "device_pic",
    formType: "upload"
  },
  {
    title: "备注信息",
    dataIndex: "remark",
    formType: "textarea",
    hide: true
  }
])
</script>
<script>export default { name: 'system:device' } </script>

<style scoped>
.iconBOX {
  width: 100px;
  height: 100px;
  border: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  caret-color: transparent;
}

.ma-icon-position {
  font-size: 12px;
}

.hide-cursor {
  caret-color: transparent;
  pointer-events: none;
  tabindex: -1;
}

.circle-box {

  margin-top: 20px;
  margin-left: 20px;
}

.control-c {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
  border: solid 2px #0a0a0a;

}

.control-left {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
  border: solid 2px #1b1b1b;
}

.cross-c {
  width: 137px;
  height: 137px;
  display: flex;
  flex-wrap: wrap;
  transform: rotate(45deg);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -70px;
}

.cross-item {
  width: 68px;
  height: 68px;
  cursor: pointer;
  position: relative;
  border: 1px solid black;
}

.center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -19px;
  margin-left: -19px;
  border-radius: 24px;
  width: 40px;
  height: 40px;
  border: solid 2px #0a0a0a;
  background: #0a0a0a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arr {
  width: 0;
  height: 0;
  border: solid 4px transparent;
  border-bottom-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}

.arr-1 {
  margin-top: -7px;
  margin-left: -7px;
  transform: rotate(-45deg);
}

.arr-2 {
  margin-top: -8px;
  margin-left: -4px;
  transform: rotate(45deg);
}

.arr-3 {
  margin-top: -3px;
  margin-left: -7px;
  transform: rotate(-135deg);
}

.arr-4 {
  margin-top: -3px;
  margin-left: -1px;
  transform: rotate(135deg);
}

.c-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container[data-v-287350ba] {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background-color: black;
  margin-top: 10px;
}

.ma_item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
}

.ma_item_right {
  margin-left: 20px;
}


.button {
  color: aqua;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  margin: 100px auto;

  border-radius: 10px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  z-index: -2;
  animation: 2s rotation linear infinite;
  transform-origin: left top;
}

@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}

.button::after {
  content: '';
  position: absolute;
  --g: 4px;
  top: var(--g);
  left: var(--g);
  width: calc(100% - var(--g)*2);
  height: calc(100% - var(--g)*2);
  background-color: #000;
  z-index: -1;
  border-radius: inherit;
}
</style>